<template>
	<div class="">

		<div class="zzc" v-if="showzzc" @click="close"></div>

		<div class="container">
			<div class="title">知识库审核</div>

			<div class="search_box">
				<input type="text" autocomplete="off" v-model="word" class="form-control search_inp" placeholder="这里输入关键词">

				<div class="sea_btn sear_btns" @click="page=1;naes=word;getlist()">
					<img src="@assets/images/search.png" alt="">
					查询
				</div>
				<!-- <div class="add_btn sear_btns" @click="openalert('add')">
					<img src="@assets/images/add.png" alt="">
					新增
				</div> -->
				<div class="del_btn sear_btns" @click="delopen" v-if="$permissions.indexOf(61)  != -1">
					<img src="@assets/images/del.png" alt="">
					删除
				</div>
			</div>
			<div class="table-responsive mt-20">
				<h2 class="tcent" v-if="list.length ==0">暂时没有数据</h2>
				<table class="table table-hover" v-else>
					<tr>
						<th style="width: 50px;" v-if="$permissions.indexOf(61)  != -1">
							<input type="checkbox" @change="changeall" v-model="choseall" name="all" id="a"><label
								for="a"></label>
						</th>
						<th>故障描述</th>
						<th>知识分类</th>
						<th>贡献时间</th>
						<th>说明</th>
						<th>
							<div class="tcent">操作</div>
						</th>
					</tr>

					<tr v-for="item,index in list">
						<td style="width: 50px;" v-if="$permissions.indexOf(61)  != -1">
							<input type="checkbox" v-model="item.chosesf" @change="chosechange" name="chose"
								:id="item.id"><label :for="item.id"></label>
						</td>
						<td style="width: 20%;color: #4286F5;">{{item.faultDescription}}</td>
						<td style="width: 20%;">{{item.faultType}}</td>
						<td style="width: 20%;">{{item.createDate}}</td>
						<td style="width: 20%;">{{item.illustrate}}</td>

						<td>
							<div class="tcent">
								<div class="audit" v-if="item.state==null"
									@click="audit(item.id,item.zskExamineId,true)">审核
								</div>
								<div class="check" v-else @click="audit(item.id,item.zskExamineId,false)">查看</div>
							</div>

						</td>
					</tr>


				</table>

				<div class="page_box">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="page" :page-sizes="[10, 30, 60, 100]" :page-size="limit"
						layout="total, sizes, prev, pager, next, jumper" :total="inglen">
					</el-pagination>
				</div>

			</div>

		</div>

		<div class="alzzc" v-if="delalert">
			<div class="del_alert">
				<div class="modal-header tit" style="text-align: left;">
					<em></em>信息
					<div class="right" @click="delalert=false">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"
							style="line-height: normal;"><span class="iconfont icon-cha" aria-hidden="true"></span>
						</button>
					</div>
				</div>
				<div class="alert_info">确认要删除选中的<span>{{delnum}}</span>条数据吗？</div>
				<div class="alert_btns">
					<div class="alert_sure" @click="del">确认</div>
					<div class="alert_close" @click="delalert=false">取消</div>
				</div>
			</div>
		</div>


		<!--知识库详情-->
		<div :class="showinfo?'modal in fade':'modal fade'" tabindex="-1" role="dialog"
			:style="showinfo?'display: block;z-index:199':''" id="add">
			<div class="cent" style="">
				<div class="modal-dialog modal-lg" role="document" style="margin: 0;">
					<div class="modal-content">
						<div class="modal-header tit">
							<em></em>知识库
							<div class="right" @click="showinfo=false;comment=''">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
										class="iconfont icon-cha" aria-hidden="true"></span>
								</button>
							</div>
						</div>
						<div class="alert_flex">
							<div class="alert_main_info">
								<div class="info_title">{{info_obj.faultDescription}}</div>
								<div class="li_bto">
									<span>{{info_obj.createDate}}</span>
									<span>{{info_obj.createName}}</span>
									<span>引用次数：{{info_obj.quote}}</span>
									<span>评论次数：{{info_obj.comment}}</span>
									<span>浏览量：{{info_obj.browse}}</span>
									<span>分类：{{info_obj.faultType}}</span>
								</div>
								<div class="info_symptom">症状：{{info_obj.symptom}}</div>
								<div class="info_deail" v-html="info_obj.solveMethod"></div>
								<div class="info_fu_title">附件</div>
								<div class="papers" v-if="info_obj.enclosure.length" v-for="item,index in info_obj.enclosure">
									<div @click="check_file($url+item)"><img src="../../assets/images/upload.png" alt="">
										{{item}}</div>
									<div class="download" @click="file_down(index)">下载</div>
								</div>
								<!-- 	<div class="info_fu_title mart25">评论</div>
							<div class="coms_list">
								<div class="nocom" v-if="!info_obj.commentByZskInfoId">暂无评论！</div>
								<div class="nocom" v-for="item in info_obj.commentByZskInfoId" v-else>
									{{item.createName}} : {{item.comment}}
								</div>
							</div>

							<div class="combox">
								<textarea v-model="comment" name="" id=""></textarea>
							</div>

							<div class="com_btns">
								<div class="com_sub" @click="comit">评论</div>
								<div class="com_clo" @click="showinfo=false;comment=''">关闭</div>
							</div> -->
							</div>

							<div class="alert_right">
								<div v-if="audidshow">
									<div class="audit_title">知识库审核</div>
									<div class="audit_chose">
										<div class="audit_li">审核结果：</div>
										<div class="radio">
											<div>
												<input type="radio" name="sex" value="1" v-model="state" id="ssa"><label
													for="ssa"></label>
												<label for="ssa" class="audit_a">通过</label>
											</div>
											<div>
												<input type="radio" name="sex" v-model="state" value="0" id="ssb"><label
													for="ssb"></label>
												<label for="ssb" class="audit_a">不通过</label>
											</div>
										</div>
									</div>

									<div class="audit_chose">
										<div class="audit_li">审核说明：</div>
										<textarea name="" id="" v-model="illustrate"></textarea>
									</div>

									<div class="com_btns">
										<div class="com_sub" @click="doaudit">确定</div>
										<div class="com_clo" @click="showinfo=false;state=1">关闭</div>
									</div>

								</div>

								<div class="audit_title">审核记录</div>
								<div class="aud_list" v-if="info_obj.examineByZskInfoId.length">
									<div class="aud_shu" v-if="info_obj.examineByZskInfoId.length"></div>
									<div>
										<div class="aud_li" v-for="item in info_obj.examineByZskInfoId">
											<div class="aud_li_top">
												<div class="aud_cur"></div>
												<div class="aud_li_user">{{item.updateName}}</div>
												<div class="aud_pass_tip" v-if="item.state == 1">通过</div>
												<div class="aud_nopass_tip" v-if="item.state == 0">未通过</div>

												<div class="aud_time">{{item.updateDate}}</div>
											</div>
											<div class="aud_illustrate"
												:style="item.state==1?'color:#32B16C':'color:#EC6941'">
												{{item.illustrate}}
											</div>
										</div>
									</div>

								</div>

								<h2 class="tcent" v-else>暂时没有数据</h2>
							</div>
						</div>

					</div>
				</div>
			</div>
		</div>

		<div class="loading-content" v-if="showloading">
			<div class="loading-spinner">
				<svg viewBox="25 25 50 50" class="circular">
					<circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
				</svg>
			</div>
			<div class="loading-text">加载中...</div>
		</div>

	</div>
</template>

<script type="text/babel">
	import $ from 'jquery'
	  
	export default {
		name: "",
		data() {
			return {
				info:{faultDescription:"",faultTypeId:""},
				showadd: false,
				showzzc: false,
				alert_show: false,
				alert_show2: false,
				alert_show3: false,
				typename : '选择状态',
				delalert: false,
				choseall:false,
				page: 1,
				list: [],
				inglen: 0,
				delnum: 0,
				limit: 10,
				num: 1,
				word:'',
				naes:'',
				name:'',
				remark:'',
				id:'',
				showloading: false,
				ids:"",
				courseId: undefined,
				showinfo:false,
				info_obj:{examineByZskInfoId:[]},
				comment:"",
				audid:"",
				state:1,
				illustrate:"",
				zskExamineId:"",
				audidshow:true
			}
		},
		components: {},

		created() {
			this.getlist();
		},

		mounted() {

		},

		methods: {
			file_down(i){
				console.log(this.info_obj)
					var enclosureId = this.info_obj.enclosureId.split(',')
					// window.open(this.$url+'/file/downloadFile?url='+this.$url + url);
				var that = this
					var param = {filed:enclosureId[i]}
					this.$http.post(this.$url + '/file/download', this.$qs.stringify(param))
						.then(function(response) {
							const blob = new Blob([response.data]);
							     const fileName = that.info_obj.enclosure[i];
							     if ("download" in document.createElement("a")) {
							       // 非IE下载
							       const elink = document.createElement("a");
							       elink.download = fileName;
							       elink.style.display = "none";
							       elink.href = URL.createObjectURL(blob);
							       document.body.appendChild(elink);
							       elink.click();
							       URL.revokeObjectURL(elink.href); // 释放URL 对象
							       document.body.removeChild(elink);
							     } else {
							       // IE10+下载
							       navigator.msSaveBlob(blob, fileName);
							     }
							})
			},
			check_file(url){
				window.open(url, '_blank');
			},
			doaudit(){
				var param = {
					state:this.state,
					id:this.zskExamineId,
					zsInfoId:this.audid,
					illustrate:this.illustrate
				}
				var that = this
				this.$http.post(this.$url + '/examine/result', this.$qs.stringify(param))
						.then(function(response) {
							if (response.data.code == '1410') {
								that.$Toast(response.data.msg);
								sessionStorage.setItem('token', '')
								that.$router.push('/login')
								return
							}
							that.$Toast(response.data.msg);
							that.state = 1
							that.illustrate = ''
							that.getlist()
							that.showinfo =false
						})
						.catch(function(error) {
							
							that.$Toast('网络拥堵，刷新一下');
						});
			},
			comit(){
				var param = {
					zsInfoId:this.info_obj.id,
					comment:this.comment
				}
				var that = this
				this.$http.post(this.$url + '/knowledge/detail', this.$qs.stringify(param))
						.then(function(response) {
							if (response.data.code == '1410') {
								that.$Toast(response.data.msg);
								sessionStorage.setItem('token', '')
								that.$router.push('/login')
								return
							}
							that.showinfo =true
						})
						.catch(function(error) {
							
							that.$Toast('网络拥堵，刷新一下');
						});
			},
			// 审核
			audit(id,zskExamineId,show){
				var that = this
				this.audid = id
				this.audidshow = show
				this.zskExamineId = zskExamineId
				var param = {
					id:id
				}
				var that = this
				this.$http.post(this.$url + '/knowledge/detail', this.$qs.stringify(param))
						.then(function(response) {
							if (response.data.code == '1410') {
								that.$Toast(response.data.msg);
								sessionStorage.setItem('token', '')
								that.$router.push('/login')
								return
							}
						that.info_obj = response.data.data
						that.info_obj.enclosure =that.info_obj.enclosure?that.info_obj.enclosure.split(','):[]
						that.showinfo = true
						})
						.catch(function(error) {
							
							that.$Toast('网络拥堵，刷新一下');
						});
			},
			closeadd(){
			
			},
			uploadsuc(file, fileList){
				 console.log(file);
				 this.files.push(file.fileDownloadUri)
			},
			add_sub(){
			
			},
			handleSizeChange(val) {
			       console.log(`每页 ${val} 条`);
								this.limit = val
								this.choseall = false
								this.getlist()
			     },
			     handleCurrentChange(val) {
			       console.log(`当前页: ${val}`);
								this.page = val
				this.choseall = false
								this.getlist()
			     },
			// 打开弹窗
			openalert(type,index){
				this.type=type
				if(index !=undefined){
					this.info=this.list[index]
					this.faultTypename=this.info.faultType
					this.faultCausename=this.info.faultCause
					this.fileList = [{name:this.info.enclosure}]
					this.files = [this.info.enclosure]
				}else{
					this.info = {faultDescription:"",faultTypeId:""}
					this.files=[]
					this.fileList=[]
					this.faultTypename=''
					this.faultCausename=''
				}
				this.alert_show=true
			
			},
			delopen(){
				var ids=''
				var num = 0
				for (var i = 0; i < this.list.length; i++) {
					if(this.list[i].chosesf==true){
						ids = ids+''+this.list[i].id+','
						num++
					}
				}
				this.ids = ids.substring(0,ids.length-1)
				if(this.ids==''){
					this.$Toast('暂无选中');
					return
				}
				this.delnum = num
				this.delalert=true		
			},
			// 删除
			del(){
				this.delalert=false
				var param = {
					ids:this.ids
				}
				var that = this
				this.$http.post(this.$url + '/knowledge/delete', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast(response.data.msg);
					that.getlist()
					})
					.catch(function(error) {
						console.log(error);
					});
			},
			changeall(){
				if(this.choseall){
					for (var i = 0; i < this.list.length; i++) {
						this.list[i].chosesf = true
					}
				}else{
					for (var i = 0; i < this.list.length; i++) {
						this.list[i].chosesf = false
					}
				}
			},
			chosechange(){
				for (var i = 0; i < this.list.length; i++) {
					if(this.list[i].chosesf == true){
						this.choseall=true
					}else{
						this.choseall=false
						break
					}
					
				}
			},
			// 表单提交
			sure() {
				this.name = this.name.trim()
				if (this.name=='') {
					this.$Toast("请填写组名");
					return
				}
				if (this.name.length > 20) {
					this.$Toast("组名过长");
					return
				}
				
				this.showloading = true
				var that = this
				var param={}
				if(this.type=='add'){
					 param = {
						name:this.name,
						remark:this.remark
					}
				}else{
					 param = {
						id:this.id,
						name:this.name,
						remark:this.remark
					}
				}	
				this.$http.post(this.$url + '/group/saveOrUpdate', this.$qs.stringify(param))
						.then(function(response) {
							if (response.data.code == '1410') {
								that.$Toast(response.data.msg);
								sessionStorage.setItem('token', '')
								that.$router.push('/login')
								return
							}
							that.$Toast('操作成功');
							that.alert_show = false
							that.getlist()
						})
						.catch(function(error) {
							console.log(error);
						});
				
			},
			// 点击遮罩层
			close(){
				this.options_show=false
				this.showzzc=false
			},
			
			getlist() {
				this.showloading = true
				this.choseall = false

				var that = this
				var param = {
					page:this.page,
					limit:this.limit,
					examineId:sessionStorage.getItem('uid'),
					faultDescription:this.naes
				}
				
				this.$http.post(this.$url + '/examine/select', this.$qs.stringify(param))
						.then(function(response) {
							if (response.data.code == '1410') {
								that.$Toast(response.data.msg);
								sessionStorage.setItem('token', '')
								that.$router.push('/login')
								return
							}
							that.list = response.data.data
							for (var i = 0; i < that.list.length; i++) {
								that.list[i].chosesf = false
							}
							that.choseall = false
							that.inglen = response.data.count
							if (that.inglen > that.limit) {
								that.num = Math.ceil(that.inglen / that.limit)
							} else {
								that.num = 1
							}
							that.showloading = false
						})
						.catch(function(error) {
							
							that.$Toast('网络拥堵，刷新一下');
						});
				
			},
		},

		computed: {},
	}
</script>
<style lang='less' scoped>
	.papers {
		display: flex;
		margin-right: 10px;
	}
	.alert_main textarea {
		height: 56px;
		width: 100%;
	}

	.pl-160 {
		padding-left: 80px;
	}

	.alert_main {
		padding: 30px 130px;
	}

	.check,
	.edit {
		margin-right: 9px;
	}

	/deep/ .el-pagination__total {
		height: 33px !important;
		line-height: 33px !important;
	}

	/deep/ .el-input--mini .el-input__inner {
		height: 33px;
	}

	/deep/.el-pagination__editor.el-input .el-input__inner {
		height: 33px;
	}

	.page_box {
		display: flex;
		justify-content: flex-end;
		margin-top: 30px;
	}

	/deep/ .el-pagination .btn-prev {
		border: 1px solid #ccc;
		padding: 0;
		border-right: none;
		min-width: 33px;
		height: 33px;
		padding-top: 2px;
	}

	/deep/ .el-pagination .btn-next {
		border: 1px solid #ccc;
		padding: 0;
		border-left: none;
		min-width: 33px;
		height: 33px;
		padding-top: 2px;
	}

	/deep/ .el-pager li {
		border: 1px solid #ccc;
		padding: 0;
		border-right: none;
		min-width: 33px;
		height: 33px;
		line-height: 33px;
	}

	/deep/ .el-pager li:nth-last-of-type(1) {
		border-right: 1px solid #ccc;
	}

	/deep/ .el-pager li.active {
		border: #4286f5 1px solid;
		background: #4286f5;
		color: #fff;
	}

	.pages {
		display: flex;
		justify-content: flex-end;
		margin-top: 10px;
	}

	.buttons {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 38px;
	}

	.closebtn {
		width: 89px;
		height: 34px;
		background: #EEEEEE;
		border-radius: 6px;
		font-size: 14px;
		color: #434343;
		text-align: center;
		line-height: 34px;
		cursor: pointer;
	}

	.sure {
		width: 89px;
		height: 34px;
		line-height: 34px;
		background: #4286F5;
		border-radius: 6px;
		font-size: 14px;
		color: #FFFFFF;
		margin-right: 18px;
		text-align: center;
		cursor: pointer;
	}

	.w600 .modal-body.h100 {
		height: 207px;
	}

	.line textarea {
		height: 75px;
	}

	.line input,
	.line textarea {
		width: 360px;
	}

	.line_title {
		font-size: 14px;
		color: #000000;
		line-height: 34px;
	}

	.line {
		display: flex;
		margin-top: 19px;
		justify-content: center;

	}

	.modal-header.tit {
		font-size: 20px;
		color: #000;
		font-weight: normal;
	}

	.w600 {
		margin: calc(50vh - 165px) auto;
	}

	.tcent {
		text-align: center;
		display: flex;
		justify-content: center;

	}

	input[type='checkbox'] {
		opacity: 0;
		position: absolute;
		z-index: -2;
	}

	input[type="checkbox"]+label {
		width: 16px;
		height: 16px;
		border: 1px solid #c8c8c8;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 0;
		box-sizing: border-box;
		margin-right: 7px;
	}

	input[type="checkbox"]+label::before {
		content: '';
		display: block;
		margin-bottom: 0;
		box-sizing: border-box;
	}

	input[type="checkbox"]:checked+label {
		border: 1px solid #0075ff;
		box-sizing: border-box;
		background: #0075ff url(../../assets/images/dui.png) no-repeat;
		background-size: 80% 80%;
		background-position-x: 20%;
		background-position-y: 20%;
	}

	input[type="checkbox"]:checked+label::before {
		background: #0075ff;
	}

	.search_inp {
		width: 275px;
		margin-bottom: 0;
	}

	.title {
		font-size: 24px;
		color: #000000;
	}


	.btns {
		width: 72px;
		padding: 0;
	}

	.zzc {
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: 4;
		top: 0;
		left: 0;
	}


	.loading-content {
		position: absolute;
		z-index: 2000;
		/* background-color: rgba(0, 0, 0, 0.8); */
		margin: 0;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		transition: opacity 0.3s;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		/* width: 200px;
		height: 150px;
		border-radius: 10px; */
	}

	.loading-spinner {
		text-align: center;
	}

	.loading-spinner .circular {
		height: 42px;
		animation: loading-rotate 2s linear infinite;
	}

	.loading-spinner .path {
		animation: loading-dash 1.5s ease-in-out infinite;
		stroke-dasharray: 90, 150;
		stroke-dashoffset: 0;
		/* stroke- 2; */
		stroke: #000;
		stroke-linecap: round;
	}

	.loading-text {
		font-size: 14px;
		color: #000;
	}

	@keyframes loading-rotate {
		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes loading-dash {
		0% {
			stroke-dasharray: 1, 200;
			stroke-dashoffset: 0;
		}

		50% {
			stroke-dasharray: 90, 150;
			stroke-dashoffset: -40px;
		}

		to {
			stroke-dasharray: 90, 150;
			stroke-dashoffset: -120px;
		}
	}

	.biaoq {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.qx:hover {
		background: #edf3fd;
		color: #4286f5;
	}


	.down {
		background: #fff;
		position: absolute;
		top: 30px;
		right: 0;
		width: 130px;
		text-align: left;
		padding: 0 5px;
		z-index: 5;

		color: #666;
		box-shadow: 0 0 10px rgb(0 0 0 / 20%);

	}

	.li {
		border-bottom: 1px solid #f3f3f3;
		padding-left: 20px;
		height: 40px;
		line-height: 40px;
	}

	.li:nth-last-of-type(1) {
		border-bottom: none;
	}

	.more {
		position: relative;
	}

	.btns .iconfont {
		font-size: 10px;
		transition: all .3s;
		transform: rotateZ(0deg);
		line-height: 26px;
	}

	.actives {
		background: #4286f5;
		color: #fff;
	}

	td,
	th {
		font-size: 14px;
		color: #333;
		/* line-height: 22px; */
		padding: 10px;
		border-top: 0;
		border-bottom: 1px solid #eee;
	}


	.modal {
		position: absolute;
	}

	.modal-dialog {
		height: 97%;
	}

	.modal-header {
		position: sticky;
		top: 0;
		z-index: 50;
	}

	.modal-content {
		/* width: 85%; */
		margin: 0 auto;
		max-height: 100%;
		/* height: 65vh; */
		/* overflow-y: scroll; */
	}

	.cent {
		width: 100%;
		align-items: center;
	}
</style>
